<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="edge">
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1.0,user-scalable=0">
    <meta content="telephone=no" name="format-detection" />
    <meta name="description" content="">
	<meta name="keywords" content="">
    <title>知识库-商品详情</title>
    <link rel="stylesheet" type="text/css" href="css/reset.css">
    <link rel="stylesheet" type="text/css" href="css/swiper.min.css">
    <link rel="stylesheet" type="text/css" href="css/global.css">
    <link rel="stylesheet" type="text/css" href="css/media.css">
</head>
<body id="app">
	<!-- 头部 -->
    <header class="header">
        <a href="javascript:history.go(-1);" title="返回" class="icon back"></a>
        <h1>商品详情</h1>
    </header>

    <!-- 商品详情 -->
    <section class="padT23 padB23 goodShow" v-cloak>
		<!-- 轮播 -->
    	<div class="swiper-container full2" id="slides">
            <ul class="swiper-wrapper">
                <li class="swiper-slide" v-for='(index, item) in info.pic' track-by="$index">
                    <a href="javascript:void(0);" class="textC j_4 bannerPhoto" title="" title="">
                        <img data-src="{{item}}" src="images/imgload.gif" alt="" class="loadImg" alt="" />
                    </a>
                </li>
               
               
            </ul>
            <div class="pagination"></div>
        </div>
		<div class="font24 color21 ell goodTit">{{info.name}}</div>
		<div class="conts">
			<!-- <span class="tit">商品简介：</span>
			<div>质感柔滑如丝，隐形微网技术使美白有效成分在肌肤熟睡时刻深入渗透至肌底，集中净白修护，持续锁住水分，让肤质更柔软润滑，翌日早晨轻松享有晶莹剔透的亮白美肌。</div>
			<img src="images/test/pic-0.png" />
			<span class="tit">注意事项：</span>
			<div>质感柔滑如丝，隐形微网技术使美白有效成分在肌肤熟睡时刻深入渗透至肌底，集中净白修护，持续锁住水分，让肤质更柔软润滑，翌日早晨轻松享有晶莹剔透的亮白美肌。</div>
			<img src="images/test/pic-0.png" /> -->
            {{info.desc}}
		</div>

		<div class="clearfix goodFooter">
			<span class="fl coins">白金币：<em>{{info.price}}</em></span>
			<span class="fl colorb6 inventory">库存：<em>{{info.stock}}</em></span>
			<!-- 金币不够时，加上class="noCoins" -->
			<a href="javascript:void(0);" v-if="info.stock!==0" class="fr change"  :class="{'noCoins':info.personGold<info.price}" @click="add('buy');">立即兑换</a>
            <a href="javascript:void(0);" v-if="info.stock!==0" class="fr addCart" @click="add('cart');">加入购物车</a>
            <a href="javascript:void(0);" v-if="info.stock===0" class="fr lowstock" >库存不足</a>
		</div>
    </section>
    
    <template v-if="addShow==true">
    	<div class="popbg"></div>
        <div class="goodSide">
            <i class="close" @click="add();"></i>
            <div class="clearfix pad24">
                <span class="fl db j_1 photo">
                    <img data-src="{{info.pic[0]}}" src="images/imgload.gif" alt="" class="loadImg"></span>
                <div class="fl text">
                    <h4 class="ell">{{info.name}}</h4>
                    <span class="db font24 desc">BUY<em>{{info.price}}</em></span>
                </div>
            </div>
            <span class="db font26 tit">商品介绍</span>
            <div class="font24 color72 goodDesc">{{info.filterDesc}}</div>
            <div class="clearfix changeBox">
                <span class="fl font26 changeNum">兑换数量</span>
                <div class="fr addSubt">
                    <a href="javascript:void(0);" class="operate" :class="{'disable':info.stock===0||num==1}" @click="changeNum(info,-1)">-</a>
                    <input id="count" type="number" class="much" v-model.number="num" readonly>
                    <a href="javascript:void(0);" class="operate" :class="{'disable':info.stock===0||num>=info.stock}" @click="changeNum(info,1)">+</a>
                </div>
            </div>
            <a href="javascript:void(0);" @click="addExchange(type);" class="sureBtn">确定</a>
        </div>
    </template>
    
    <script type="text/javascript" src="js/lib/jquery.min.js"></script>
    <script type="text/javascript" src="js/lib/vue.js"></script>

    <script type="text/javascript" src="js/lib/global.js"></script>
    <script type="text/javascript" src="js/lib/alert.js"></script>
    <script type="text/javascript" src="js/lib/swiper.min.js"></script>
    <script type="text/javascript" src="js/app.js"></script>
    <script type="text/javascript" src="js/lib/common.js"></script>
    <script type="text/javascript" src="js/goodDetail.js"></script>

    <script type="text/javascript">
    	// 轮播
        var swiper = new Swiper('.full2',{
            pagination: '.full2 .pagination',
            paginationClickable: true,
            speed: 5000,
            autoplay: false,
            loop: true
        });
        // 比例
    	myJS.imgScale('.j_3', '3', '1');
    	myJS.imgScale('.j_1', '1', '1');
    	myJS.imgScale('.j_4', '4', '3');
    	myJS.ImgFull('.loadImg');

        // 禁止滚动
        var stop = 1;
        $(function(){
            if(!$('.goodSide').is(':hidden')){
                stop = 0;
            }else{
                stop = 1;
            }
        });
        document.addEventListener('touchmove', function(e){
            if(stop == 0){
                e.preventDefault();
                e.stopPropagation();
            }
        },false);

        //myJS.init();
    </script>
</body>
</html>